<template>
	<view class="detailsBox">
		<swiper class="swiper" circular
			:indicator-dots="indicatorDots" 
			:autoplay="autoplay" 
			:interval="interval"
			:duration="duration">
			<swiper-item v-for="(item,index) in 3" :key="index">
				<img :src="goodsDetails.imgSrc"  style="width: 100%;height: 100%;"  alt="">
			</swiper-item>
		</swiper>
		<view class="name content">{{goodsDetails.shopname}}</view>
			<view class="content">
				<view class="">
					<p class="title">积分</p>
					<text class="piont">{{goodsDetails.allPionts}}</text>
					积分
				</view>
				<checkbox-group @change="checkboxChangeOne">
					<checkbox value="积分兑换" :checked="payType==1?true:false" ></checkbox>
				</checkbox-group>
			</view>
			<view class="content" v-if="goodsDetails.money!==0">
				<view class="">
					<p class="title">积分+现金</p>
					<text class="piont">{{goodsDetails.piont}}</text>
					积分+
					<text class="piont">{{goodsDetails.money}}</text>
					元
				</view> 
				<checkbox-group @change="checkboxChangeTwo">
					<checkbox value="积分+现金兑换" :checked="payType==2?true:false" ></checkbox>
				</checkbox-group>
				
			</view>
	
		
		<view class="division"></view>
		<view class="countBox">
			<text>数量</text>
			<uni-number-box v-model="count" min="1" @change="changeValue" />
		</view>
		<view class="division"></view>
		<view class="description">
			<p>商品介绍：</p>
			<p style="text-indent: 2em;">此商品为积分兑换物品，此商品为积分兑换物品，此商品为积分兑换物品此商品为积分兑换物品</p>
		</view>
		<view class="goods-carts">
			<view class="countTotal" v-if="payType==1">
				<text class="piontTotal">积分合计：
				<text class="number">{{allPiontTotal}}</text>
					
				</text>
				<text class="moneyTotal">现金合计：
				<text class="number">￥ 0</text>	
				</text>
			</view>
			<view class="countTotal" v-if="payType==2">
				<text class="piontTotal">积分合计：
				<text class="number">{{piontTotal}}</text>
					
				</text>
				<text class="moneyTotal">现金合计：
				<text class="number">￥{{moneyTotal}}</text>	
				</text>
			</view>
			<view class="exchange" @click="toPay">
				立即兑换
			</view>
		</view>
		
	</view>
</template>

<script >

	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				//商品详细信息
				goodsDetails:[
					
				],
				count:1,
				payType:'',
				
				
			}
		},
		computed:{
			allPiontTotal(){
				return this.goodsDetails.allPionts*this.count;
			},
			piontTotal(){
				return this.goodsDetails.piont*this.count;
				},
			moneyTotal(){
				return this.goodsDetails.money*this.count;
			}
			
		},
		onLoad: function (option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			// console.log(item.type)
			this.goodsDetails=item;
			this.payType=this.goodsDetails.type
		},
		methods: {
			toPay(){
				console.log("立即兑换");
				let data={
					...this.goodsDetails,
					count:this.count,
					payType:this.payType
				}
				console.log(data)
				uni.navigateTo({
					url:'/uni_modules/shop-productOrder/components/shop-productOrder/shop-productOrder?data='+encodeURIComponent(JSON.stringify(data))
				})
			},
			checkboxChangeOne(e){
				// this.payType=val;
				// console.log(this.type)
				console.log('纯积分兑换', e.detail.value);
				 
				 if(e.detail.value=="积分兑换"){
					this.payType=1;
				 }
				 console.log(this.payType);
				 
			},
			checkboxChangeTwo(e){
				console.log('积分+现金兑换', e.detail.value);
				if(e.detail.value=="积分+现金兑换"){
					this.payType=2;
				}
				console.log(this.payType);
			}
		
		}
	}
</script>

<style scoped>
	
	.detailsBox{
		width: 100%;
		color: #4c4c4c;
		display: flex;
		flex-direction: column;
	}
	.content{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: center;
		padding: 20rpx;
		font-size: 12px;
		border-bottom: 1px solid #e8e8e8;
	}
	.name{
		width: 100%;
		padding: 20rpx;
		font-size:18px;
		font-weight: 550;
		border-bottom: 1px solid #e8e8e8;
	}
	.title{
		font-size:16px;
		margin-bottom:  10rpx;
	}
	.piont{
		color: #F5B43E;
		font-size: 16px;
	}
	.division{
		background-color: #f2f2f2;
		height: 40rpx;
	}
	.countBox{
		width: 94%;
		padding:3%;
		font-size:16px;
		display: flex;
		justify-content: space-between;
	}
	.description{
		width: 100%;
		padding: 20rpx;
		font-size:14px;
	}
	.goods-carts {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			justify-content: flex-end;
			position: fixed;
			left: 0;
			right: 0;
			/* #ifdef H5 */
			left: var(--window-left);
			right: var(--window-right);
			/* #endif */
			bottom: 0;
			border: 1px solid #e8e8e8;
	}
	.countTotal{
		display: flex;
		flex-direction: column;
		height: 100rpx;
		line-height: 50rpx;
		font-size: 14px;
		margin-right: 20rpx;
	}
	.exchange{
		width: 30%;
		height: 100rpx;
		line-height: 100rpx;
		background-color: #F5B43E;
		text-align: center;
		font-size: 14px;
		color: aliceblue;
	}
	.number{
		color: #F5B43E;
	}
</style>

